<template>
	<view style="padding: 10px 0 5px 0;">
		<!-- 轮播图 -->
		<u-swiper :list="carousel_chart" keyName="image" showTitle previousMargin="30" nextMargin="30" circular :autoplay="true" :loading="false" radius="5" bgColor="#F9F9F9" @click="gowebview"></u-swiper>
		<!-- 四宫格 -->
		<view class="grid-list">
			<view class="grid-item" @click="goPage('/pages/news/submission_page')">
				<image class="grid-img" src="/static/images/grid-home/article_submission.png" />
				<view class="grid-title">投稿</view>
			</view>
			<view class="grid-item" @click="goPage('/pages/index/group')">
				<image class="grid-img" src="/static/images/grid-home/group.png" />
				<view class="grid-title">群组</view>
			</view>
			<view class="grid-item" @click="goPage('/pages/index/friendship')">
				<image class="grid-img" src="/static/images/grid-home/friendship_link.png" />
				<view class="grid-title">友情链接</view>
			</view>
			<view class="grid-item" @click="user_sign_in">
				<image class="grid-img" src="/static/images/grid-home/sign.png" />
				<view class="grid-title">签到</view>
			</view>
		</view>
		<!-- 公告 -->
		<view class="announcement-class" v-if="announcement_content_show">
			<u-notice-bar :text="announcement_content" color="#ffffff" bgColor="#5AC725"></u-notice-bar>
		</view>
		<!-- 帖子列表 -->
		<post-list :list="post_list"></post-list>
		<u-loadmore v-if="post_list.length != 0" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />

		<!-- 展示签到成功的动画 金币图片一直在屏幕中间旋转 3s后消失-->
		<view class="sign-in-success" v-if="sign_in_success">
			<image class="sign-in-success-img" src="/static/images/sign-money.png" />
			<!-- 展示文本 签到成功 -->
			<view style="color: #fff; font-size: 20px; margin-top: 10px;">签到成功</view>
		</view>
		<!-- 更新ui -->
		<view class="mask flex-center" v-if="update_modal">
			<view class="content botton-radius">
				<view class="content-top">
					<image class="content-top" style="top: 0;" width="100%" height="100%" src="/static/images/bg_top.png">
					</image>
				</view>
				<view class="content-header"></view>
				<view class="content-body">
					<view class="title">
						发现新版本
						<text style="padding-left:20rpx;font-size: 0.5em;color: #666;">v.{{ updates_info.update_version }}</text>
					</view>
					<view class="body">
						<scroll-view class="box-des-scroll" scroll-y="true">
							<text class="box-des">
								{{ updates_info.update_content }}
							</text>
						</scroll-view>
					</view>
					<view class="footer flex-center">
						<button class="content-button" style="border: none;color: #fff;" @click="go_download">
							立即下载
						</button>
					</view>
					<image class="close-img" src="/static/images/app_update_close.png" @click="update_modal = false">
					</image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading: true,
			login_user_id: '', //登录用户id
			carousel_chart: [],
			announcement_content: '',
			announcement_content_show: false,
			post_list: [],
			formData: {
				limit: 10,  //每页10条数据
				page: 1,   //第几页
			},
			status: 'loadmore',
			loadingText: '努力加载中',
			loadmoreText: '轻轻上拉',
			nomoreText: '已经到底了哈',
			sign_in_success: false,
			updates_info: {},
			update_modal: false,
		}
	},
	onLoad() {
		this.login_user_id = uni.getStorageSync('userid');
		this.get_app_info();
		this.get_recommended_posts();
	},
	onReachBottom() {
		this.get_recommended_posts();
		this.status = 'loading';
	},
	onNavigationBarSearchInputClicked(e) {
		uni.navigateTo({
			url: '/pages/index/search'
		})
	},
	onNavigationBarButtonTap(e) {
		if (e.index == 1) {
			uni.navigateTo({
				url: '/pages/news/submission_page'
			})
		}
		if (e.index == 0) {
			this.user_sign_in();
		}
	},
	onPullDownRefresh() {
		this.formData = {
			limit: 10,  //每页10条数据
			page: 1,   //第几页
		},
			this.post_list = [];
		//调用获取数据方法
		this.get_app_info();
		this.get_recommended_posts();
		setTimeout(() => {
			//结束下拉刷新
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		async get_app_info() {
			let get_app_info = await this.$api.get_app_info({});
			if (get_app_info.code == 1) {
				//轮播图
				this.carousel_chart = get_app_info.data.app_exten_info.carousel_chart;
				//公告内容
				let announcement_content = get_app_info.data.announcement_configuration.content;
				if (get_app_info.data.announcement_configuration.title != '') {
					announcement_content = get_app_info.data.announcement_configuration.title + "：" + get_app_info.data.announcement_configuration.content;
				}
				if (get_app_info.data.announcement_configuration.content != '') {
					this.announcement_content_show = true;
				}
				this.updates_info = get_app_info.data.updates_info;
				if (uni.getSystemInfoSync().appWgtVersion != this.updates_info.update_version) {
					this.update_modal = true;
				}
				this.announcement_content = announcement_content;
				this.loading = false;
			}
		},
		async get_recommended_posts(type = 0) {
			let get_recommended_posts = await this.$api.get_recommended_posts(this.formData);
			if (get_recommended_posts.code == 1) {
				if (type == 0) {
					if (this.formData.page > get_recommended_posts.data.pagecount) {
						this.status = 'nomore';
					} else {
						this.formData.page++;
						this.status = 'loadmore';
						this.post_list = this.post_list.concat(get_recommended_posts.data.list);
					}
				} else {
					this.formData = {
						limit: 10,  //每页10条数据
						page: 1,
					},   //第几页
						this.post_list = get_recommended_posts.data.list;
				};
			}
		},
		gowebview(index) {
			let item = this.carousel_chart[index];
			uni.navigateTo({
				url: '/pages/common/webview?url=' + encodeURIComponent(item.url)
			})
		},
		goPage(url) {
			uni.navigateTo({
				url: url
			})
		},
		async user_sign_in() {
			//未登录 跳转到登录页面
			if (this.login_user_id == '') {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			let user_sign_in = await this.$api.user_sign_in({});
			if (user_sign_in.code == 1) {
				this.sign_in_success = true;
				setTimeout(() => {
					this.sign_in_success = false;
				}, 3000);
			}
		},
		// 跳转下载更新
		go_download() {
			// #ifdef APP-PLUS
			plus.runtime.openURL(this.updates_info.update_url);
			// #endif
		},
	}
}
</script>

<style lang="less">
page {
	background-color: #F9F9F9;
}

.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.grid-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 10px;
	background-color: #fff;
	margin: 10px;
	border-radius: 15px;

	.grid-item {
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.grid-img {
			width: 30px;
			height: 30px;
		}

		.grid-title {
			font-size: 13px;
			font-weight: bold;
		}
	}

}

.announcement-class {
	background-color: #5AC725;
	margin: 10px;
	border-radius: 10px;
	padding: 0 10px;
}

.sign-in-success {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999;
}

/* css使图片一直旋转 */
.sign-in-success-img {
	width: 300upx;
	height: 300upx;
	animation: rotate 3s linear infinite;
}

@keyframes rotate {
	from {
		transform: rotateY(0deg);
	}

	to {
		transform: rotateY(180deg);
	}
}

// 更新ui
.flex-center {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	justify-content: center;
	align-items: center;
	z-index: 100000000;
}

.mask {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, .65);
}

.botton-radius {
	border-bottom-left-radius: 30rpx;
	border-bottom-right-radius: 30rpx;
}

.content {
	position: relative;
	top: 0;
	width: 600rpx;
	background-color: #fff;
	box-sizing: border-box;
	padding: 0 50rpx;
	font-family: Source Han Sans CN;
}

.text {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	line-height: 200px;
	text-align: center;
	color: #FFFFFF;
}

.content-top {
	position: absolute;
	top: -195rpx;
	left: 0;
	width: 600rpx;
	height: 270rpx;
}

.content-header {
	height: 70rpx;
}

.title {
	font-size: 33rpx;
	font-weight: bold;
	color: #3DA7FF;
	line-height: 38px;
}

.footer {
	height: 150rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.box-des-scroll {
	box-sizing: border-box;
	padding: 0 40rpx;
	height: 200rpx;
	text-align: left;
}

.box-des {
	font-size: 26rpx;
	color: #000000;
	line-height: 50rpx;
}

.progress-box {
	width: 100%;
}

.progress {
	width: 90%;
	height: 40rpx;
	/* border-radius: 35px; */
}

.close-img {
	width: 70rpx;
	height: 70rpx;
	z-index: 1000;
	position: absolute;
	bottom: -120rpx;
	left: calc(50% - 70rpx / 2);
}

.content-button {
	text-align: center;
	flex: 1;
	font-size: 30rpx;
	font-weight: 400;
	color: #FFFFFF;
	border-radius: 40rpx;
	margin: 0 18rpx;

	height: 80rpx;
	line-height: 80rpx;

	background: linear-gradient(to right, #1785ff, #3DA7FF);
}

.flex-column {
	display: flex;
	flex-direction: column;
	align-items: center;
}
</style>